<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="decorator/decorator">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>菜品显示</title>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>
</head> 
<body>
   <div layout:fragment="content" th:remove="tag">
	<div class="modal fade" id="addFoodModal" tabindex="-1" role="dialog" aria-labelledby="addFoodModalLabel">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="true">
			         &times;
			       	</button>
			        <h4 class="modal-title" id="addFoodModalLabel">
			      		增加菜品</h4>
			      </div>
			      <div class="modal-body">
			       		<form id = "addFoodForm" method="post">
			       		<p><label>菜系：</label><select name="foodtypeId"></select></p>       					       	
			       		<p><label>菜品：</label><input type="text" name="foodName" /></p>
			       		<p><label>菜品描述：</label><input type="text" name="remark" /></p>
			       		<p><label>价格：</label><input type="text" name="price"  /></p>
			       		<p><label>会员价格：</label><input type="text" name="mprice" /></p>
			       		
			       		</form>    		
			       
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			         <button id="addFoodSaveBtn" type="button" class="btn btn-primary">Save changes</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


	<div class="modal fade" id="editFoodModal" tabindex="-1" role="dialog" aria-labelledby="editFoodModalLabel">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="true">
			         &times;
			       	</button>
			        <h4 class="modal-title" id="editFoodModalLabel">
			      		修改菜品</h4>
			      </div>
			      <div class="modal-body">
			       		<form id = "editFoodForm" method="post">
			       		<p><label>菜系：</label><select name="foodtypeId"></select></p>       					       	
			       		<p><label>菜品：</label><input type="text" name="foodName" /></p>
			       		<p><label>菜品描述：</label><input type="text" name="remark" /></p>
			       		<p><label>价格：</label><input type="text" name="price"  /></p>
			       		<p><label>会员价格：</label><input type="text" name="mprice" /></p>		   
			       		</form>    		
			       
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			         <button id="editFoodSaveBtn" type="button" class="btn btn-primary">Save changes</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


<!-- Table goes in the document BODY -->
<table class="hovertable" align="center" width="80%">
   <tr><td colspan="10" align="center"><h3>菜品显示</h3></td></tr>
	<tr>
		<th><input type="button" value="新增" class="add-food"/></th>
		<th>id</th>
		<th>菜系</th>
        <th>菜名</th>
        <th>描述</th>
        <th>价格</th>
        <th>会员价格</th>
        <th>菜品图片</th>
        <th>修改</th>
       <th>删除</th>
	</tr>
	
	<tr th:each="food:${foods}"  onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
		<td></td>
		<td th:text="${food.foodId}"></td>
		<td th:text="${food.foodTypeVO.typeName}"></td>
        <td th:text="${food.foodName}"></td>
        <td th:text="${food.remark}"></td>
        <td th:text="${food.price}"></td>
        <td th:text="${food.mprice}"></td>
       <td>
        <img th:src="@{'/images/'+${food.img}+'.jpg'}"></img>
       </td>
        <td><input type="button" value="修改" class="edit-food"/></td>
        <td><input type="button" value="删除"  th:onclick="'deleteFood('+${food.foodId}+');'"/>
        </td>
      
	</tr>
	
</table>

<script  th:src="@{js/jquery-1.11.1.min.js}" type="text/javascript"></script> 

<!-- Bootstrap -->
<script  th:src="@{js/bootstrap.min.js}"></script>
<script  th:src="@{js/jquery.validate.min.js}"></script>


	<script>
	$(document).ready(function(){ 
	//新增菜品时候，查找所有菜系
	$('.add-food').click(function() {
		$.ajax({
			type:'POST',
			url:'/getFoodTypes',		
			dataType:"json",
			success:function(data){
				$('#addFoodForm select[name="foodtypeId"]').empty();
				$.each(data.foodTypeVO,function(index,item){		
						$('#addFoodForm select[name="foodtypeId"]').append('<option value="'+item.foodtypeId+'">'+item.typeName+'</option>');
				});										
			} 
			
		}); 
		$('#addFoodModal').modal('show');	
	}); 
	
	//保存新增菜品
	$('#addFoodSaveBtn').click(function(){
		if($('#addFoodForm').valid()) {			
			var foodtypeId = $('#addFoodForm select[name="foodtypeId"]').val();
			var foodName = $('#addFoodForm input[name="foodName"]').val();
			var remark = $('#addFoodForm input[name="remark"]').val();
			var price = $('#addFoodForm input[name="price"]').val();
			var mprice = $('#addFoodForm input[name="mprice"]').val();	
			var param ={
					typeId:foodtypeId,
					foodName:foodName,
					remark:remark,
					price:price,
					mprice:mprice					
				}
			debugger;
			$.ajax({
				type : 'POST',
				url:'/saveFood',
				contentType : "application/json",
				dataType:"json",
				data: JSON.stringify(param),
				success:function(data){
					if(data.success){
						alert('添加成功!');						
						window.location.reload();
					}else{
						var messageMap = data.messageMap;					
						for(var key in messageMap){
							var value = messageMap[key];
						}
						alert('添加失败');
					}
				}
			})
		}
	})
	
	//点击修改，显示单前菜品的可修改信息
	$('.edit-food').click(function() {
		//修改菜品时候，查找所有菜系
		$.ajax({
			type:'POST',
			url:'/getFoodTypes',		
			dataType:"json",
			success:function(data){
				$('#editFoodForm select[name="foodtypeId"]').empty();
				$.each(data.foodTypeVO,function(index,item){		
						$('#editFoodForm select[name="foodtypeId"]').append('<option value="'+item.foodtypeId+'">'+item.typeName+'</option>');
				});										
			} 
			
		}); 
		//修改菜品，显示单前菜品的可修改信息
		foodId = $(this).parent().siblings().eq(1).text();
		$.ajax({ 
			type: 'POST',
			url: '/getFoodById',
			data: {
				foodId: foodId
			}, 
			dataType: "json",
			success: function(data) {				
				$('#editFoodForm select[name="foodtypeId"]').val(data.foodTypeVO.foodtypeId); 
				$('#editFoodForm input[name="foodName"]').val(data.foodName);
				$('#editFoodForm input[name="remark"]').val(data.remark);
				$('#editFoodForm input[name="price"]').val(data.price);
				$('#editFoodForm input[name="mprice"]').val(data.mprice);
				
			}
			
		});	
		$('#editFoodModal').modal('show');	
	}); 
	
	//保存修改菜品
	$("#editFoodSaveBtn").click(function() {
		if($("#editFoodForm").valid()) {
			var foodtypeId = $('#editFoodForm select[name="foodtypeId"]').val();
			var foodName = $('#editFoodForm input[name="foodName"]').val();
			var remark = $('#editFoodForm input[name="remark"]').val();
			var price = $('#editFoodForm input[name="price"]').val();
			var mprice = $('#editFoodForm input[name="mprice"]').val();
			
			var param ={
					foodId:foodId,
					typeId:foodtypeId,
					foodName:foodName,
					remark:remark,
					price:price,
					mprice:mprice					
				}		
			$.ajax({
				type : 'POST',
				url:'/editFood',
				contentType : "application/json",
				dataType:"json",
				data: JSON.stringify(param),
				success:function(data){
					if(data.success){
						alert('修改成功!');						
						window.location.reload();
					}else{
						var messageMap = data.messageMap;					
						for(var key in messageMap){
							var value = messageMap[key];
						}
						alert('修改失败');
					}
				}
			})
		}
	})
	}); 	
	//删除菜品
	function deleteFood(foodId) {
		if(confirm('是否删除')){
			$.ajax({
				type:"POST",
				url:"/deleteFood",
				//contentType : "application/json",
				data:{
					foodId:foodId
					},
				dataType:"json",
				success:function(data){
					
					alert('删除成功');
					
					location.href = "/showAllFood";
				
				}
			});				
		}
	}
	</script>
</div>
</body>
</html>